<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>账号注册</title>
    <link rel="icon" href="../img/dgs.jpg" type="image/jpg" >
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        body{background-image: url("../img/zhuce.jpg")}
        #bigFather{
            position: relative;
            margin: 100px auto 0;
            width: 600px;
            height: 670px;
            border: 1px solid black;
            background-color: rgba(255,255,255,0.3);
        }
        #fanhui{
            margin-top: 20px;
            width: 120px;
            float: left;
        }
        #head{
            margin: 20px auto 0;
            width: 200px;
            height: 50px;
            text-align: center;
        }
        #info{
            width: 600px;
            height: 340px;
            margin: 30px auto 0;
        }
        #mima{
            width: 600px;
            height: 120px;
            margin: 0 auto;
        }
        .duinput{
            position: relative;
            width: 50%;
            font-size:14px;
            height:40px;
            border-radius:5px;
            border:1px solid #4abbd8;
            color:black;
            outline:0;
            text-align:left;
            padding-left: 10px;
            display:block;
        }
        .fasong{
            position: relative;
            border-radius:20px;
            height: 42px;
            width: 120px;
            margin-left: 20px;
            color: white;
            background-color: #00a7de;
        }
        .duform{
            width: 500px;
            height: 130px;
            float: left;
        }
        .sex{
            margin-left: 200px;
            width: 300px;
            height: 40px;
        }
        .address{
            margin-left:120px;
            margin-top: 20px;
            width: 400px;
            height: 40px;
        }
        input::-webkit-input-placeholder{
            color: #4abbd8;
            font-size: 14px;
        }
        .register{
            border-radius:20px;
            width: 30%;
            height: 35px;
            background-color: #00a7de;
            margin-top: 30px;
            margin-left: 35px;
            color: white;
        }
        button{
            outline: none;
            border: none;
        }
        .register:hover {
            background-color:#3eb5de;
        }
        #fanhui b{color: #cf0d22 }
        #fanhui b:hover{color: black}
        body i{color: white}
    </style>
</head>
<body>
<div id="bigFather">
    <div id="fanhui"><a href="login.html"><b><i style="float:left;margin:5px 0 20px 22%;font-size: 1.5em" class="layui-icon layui-icon-return">&nbsp;返&nbsp;回</i></b></a></div>
    <div id="head"><b style="font-size: 2.5em">账&nbsp;号&nbsp;注&nbsp;册</b></div>
    <div id="info">
        <i style="float:left;margin:5px 0 20px 22%;font-size: 2em" class="layui-icon layui-icon-username"></i>
        <input id="name"  style="margin: 0 0 20px 10px;float: left" class="duinput" lay-verify="required" autocomplete="off" placeholder="昵称">

        <form class="layui-form duform" action="" lay-filter="data">
            <div class="layui-input-block sex">
                <input type="radio" name="sex" value="男" title="男" checked="">
                <input type="radio" name="sex" value="女" title="女">
            </div>


            <div class="layui-form-item address" style="padding-right: 55px;">
                <i style="float:left;margin:5px 0 0 10px;font-size: 2em" class="layui-icon layui-icon-location"></i>
                <div class="layui-input-inline" style="border: 1px solid #4abbd8;width: 9.5em !important;float: left;margin-left:10px">
                    <select class="aa" required name="province" id="province" lay-filter="province">
                        <option value="">选择省份</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="border: 1px solid #4abbd8;width: 12em !important;float: left">
                    <select required name="city" id="city">
                        <option value="">请先选择省份</option>
                    </select>
                </div>
            </div>
        </form>

        <i style="float:left;margin:5px 10px 30px 22%;font-size: 2em" class="layui-icon layui-icon-cellphone"></i>
        <input id="phone" value="" style="margin:0 0 30px 10px" class="duinput" lay-verify="required" autocomplete="off" placeholder="手机号">

        <i style="float:left;margin:5px 10px 30px 22%;font-size: 2em" class="layui-icon layui-icon-vercode"></i>
        <input id="yzm" style="width: 160px;float: left" class="duinput" lay-verify="required" autocomplete="off" placeholder="验证码">
        <button id="fasong"  class="fasong">发送验证码</button>
    </div>
        <div id="mima">
            <i style="float:left;margin:5px 10px 30px 22%;font-size: 2em" class="layui-icon layui-icon-password"></i>
            <input id="psw" type="password" style="margin: 0 0 30px 22%" class="duinput" lay-verify="required" autocomplete="off" placeholder="输入密码">

            <i style="float:left;margin:5px 10px 30px 22%;font-size: 2em" class="layui-icon layui-icon-password"></i>
            <input id="qdpsw" type="password" style="margin: 0 0 30px 22%" class="duinput" lay-verify="required" autocomplete="off" placeholder="确定输入密码">
        </div>
    <div id="zhuce" class="zhuce">
        <button id="register" class="register">注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册</button>
    </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>
<script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
<script src="js/addressSelect.js" charset="utf-8"></script>
<script>
    for (var i = 0; i < addressSelect.length; i++) {
        $("#province").append("<option value='" + i + "'>" + addressSelect[i].name + "</option>");
    }
    var $yzm = document.getElementById('fasong'), flag = false;
    $yzm.onclick = function(){
        var mobile = $('#phone').val();
        var time=30;
        var h;
        if (mobile==''){
            layer.msg('手机号码为空');
        }
        else {
            if(flag){
                return false;
            }
            flag = true;
            phone(mobile);
            h= setInterval(function(){
                $yzm.style.backgroundColor='#eee';
                $yzm.style.border='1px solid #ccc';
                $yzm.style.color='#777';
                $yzm.style.cursor='not-allowed';
                if(time<10){
                    time='0'+time;
                }
                $yzm.textContent=time+'秒后重新获取';
                time--;
                if(time<0){
                    clearInterval(h);
                    flag = false;
                    $yzm.textContent='重新发送验证码';
                    $yzm.style.backgroundColor='#3eb5de';
                    $yzm.style.border='none';
                    $yzm.style.color='white';
                    $yzm.style.cursor='pointer';
                }
            },1000);
        }
    }

    $('#fasong').text('发送验证码');
    layui.use(['layer', 'form'], function() {
        var layer = layui.layer;
        var form = layui.form;

        form.on('select(province)', function(data) {
            if (data.value.length < 0) return false;
            $("#city").empty();
            for (var i = 0; i < addressSelect[data.value].city.length; i++) {
                $("#city").append("<option value='" + i + "'>" + addressSelect[data.value].city[i].name +
                    "</option>");
            }
            form.render('select');
        });

        layui.$('#register').on('click', function(){
            var data = form.val('data');
            data.username =$('#name').val();
            data.telephone =$('#phone').val();
            data.password =$('#psw').val();
            data.code =$('#yzm').val();
            data.city = addressSelect[data.province].city[data.city].name;
            data.province = addressSelect[data.province].name;
            if ($('#psw').val() !=$('#qdpsw').val()){
                layer.msg('两次密码不一致');
            }
        else {
            $.ajax({
                url: '/user/register',
                method: 'POST',
                contentType: 'application/json',
                async: true,
                data: JSON.stringify(data),
                success: function(res) {
                    layer.alert(res.msg, {
                        end: function() {
                            if (res.code == 200) location.href = 'login.html';
                        }
                    })
                }
            })
        }
        })
    })

    function phone(tele) {
        $.ajax({
            url: '/user/sendSms/'+tele,
            method: 'GET',
            contentType: 'application/json',
            success: function(res) {
                layer.msg(res.msg)
            }
        })
    }
</script>

</body>
</html>